window.onload=function(){
    lunBotu();
    gunDong();
    timeOut();
}

// -----滚动-----
function gunDong(){
var main = document.querySelector(".main");

var header = document.querySelector(".header");
var mainHeight= main.offsetHeight;

window.onscroll=function setFull(){
    var offsetTop = document.body.scrollTop||document.documentElement.scrollTop;
    if(offsetTop<mainHeight){
      var opactiy=0;
        opactiy = offsetTop/mainHeight;
        header.style.background="ragb(233,35,34," + opactiy + ")";
    }
  }
}
// -----轮播图-----

function lunBotu(){


var main = document.querySelector(".main");
var banner =document.querySelector(".banner");
var first = banner.querySelector("li:first-of-type");
var last = banner.querySelector("li:last-of-type");
banner.appendChild(first.cloneNode(true));
banner.insertBefore(last.cloneNode(true),banner.firstChild)
var lis=banner.querySelectorAll("li");
var count = lis.length;
var mainWidth=main.offsetWidth;
console.log(mainWidth);
banner.style.width = count*mainWidth +"px";
for(var i = 0; i<lis.length; i++){
     lis[i].style.width=mainWidth + "px";
  }
   var index = 1;
   banner.style.left=-mainWidth + "px";
window.onresize=function(){
    mainWidth=main.offsetWidth;
    banner.style.width=count.mainWidth+"px";
    for(var i = 0;i<lis.length;i++){
        lis[i].style.width=mainWidth+'px';
    }
    banner.style.left=-index*mainWidth+'px';
};
// ---点标记
var setIndicator = function(index){
    var bot = document.querySelector(".bot");
  
    var baList = bot.querySelectorAll("li");
    for(var i = 0; i < baList.length;i++){
        baList[i].classList.remove("active");
        baList[index-1].classList.add("active");
    }
  }
var timerId;
var startTime = function(){
    timerId=setInterval(function () {
        index++;
        banner.style.transition="left 0.5s ease-in-out";
        banner.style.left=(-index*mainWidth) + "px";
        setTimeout(function(){
        if(index==count-1){
            index=1;
          banner.style.transition="none";
           
            banner.style.left=-index*mainWidth + "px";
        }
    },500);
    },2000);
};
startTime();
// 点标记


// ----手动滑动
var startX,moveX,distanceX;
 //节流阀可以执行
banner.addEventListener("touchstart",function(e){
    
    
    clearInterval(timerId);
    startX=e.targetTouches[0].clientX;
})
banner.addEventListener("touchmove",function(e){
 
    if(isEnd=true){

   
    banner.style.transition="none";
    moveX=e.targetTouches[0].clientX;
    
    
    distanceX=moveX-startX;
    banner.style.left=(-index*mainWidth+distanceX)+"px";
    }
});
banner.addEventListener("touchend",function(e){
    isEnd=false;
    if(Math.abs(distanceX) > 100){
        if(distanceX>0){
            index--;
           
        }else{
            index++;
           
        }
        banner.style.transition = "left 0.5s ease-in-out"
        banner.style.left=-index*mainWidth + "px";
        }
        else if(Math.abs(distanceX) > 0){
            banner.style.transition = "left 0.5s ease-in-out"
            banner.style.left = -index.mainWidth + "px";
            // console.log(banner.style.left);
    }
    startX = 0;
    moveX = 0;
    distanceX = 0;
});
// ----------监听--
banner.addEventListener("webkitTransitionEnd",function(e){
  if(index===count-1){
      
      index=1
      banner.style.transition="none";
      banner.style.left=-index*mainWidth+"px";
  }else if(index===0){
      index=count-2;
      banner.style.transition="none";
      banner.style.left=-index*mainWidth+"px";
  }
  setIndicator(index);
  setTimeout(function(){
      isEnd=true;
      /*清除之前添加的定时器*/
      clearInterval(timerId);
      //重新开启定时器
      startTime();
  },100);
 
   });
}

 



// 倒计时
function timeOut(){
    var spans=document.querySelector(".time").querySelectorAll("span");
    var totalTime=3700;
    var timerId=setInterval(function(){
        totalTime--;
        if(totalTime < 0){st
            clearInterval(timerId);
            return;
        }
        var hour=Math.floor(totalTime/3600);
        var minute=Math.floor(totalTime%3600/60);
        var second=Math.floor(totalTime%60);
        spans[0].innerHTML=Math.floor(hour/10);
        spans[1].innerHTML=Math.floor(hour%10);
        spans[3].innerHTML=Math.floor(minute/10);
        spans[4].innerHTM=Math.floor(minute%10);
        spans[6].innerHTML=Math.floor(second/10);
        spans[7].innerHTML=Math.floor(second%10);
    },2000);
} 